/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useCallback, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Modal, Tree } from 'antd';
import { isLegalData } from '@/utils/utils';

const { DirectoryTree, TreeNode } = Tree;

const TransformOperator = React.memo(props => {
  const {
    children,
    visible,
    toggleOpen,
    dispatch,
    station,
    getOperatorList,
    selectedOperator,
  } = props;
  const [trees, setTrees] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState(['']);
  const { list, selectedKeys: _selectedKeys, company_info, currentStation } = station;

  useEffect(
    () => {
      if (list) {
        setTrees(
          company_info
            ? [{ list, name: company_info.brand_name, brand_code: company_info.brand_code || '' }]
            : list,
        );
        visible && setSelectedKeys(_selectedKeys);
      }
    },
    [list, company_info, _selectedKeys, visible],
  );

  const onOk = () => {
    const { is_gp_area: old_site_gp_status = 1 } = currentStation;
    const courier_phone = isLegalData(selectedOperator, []).map(i => i.courier_phone);
    const company_site_id = selectedKeys[0] === company_info?.brand_code ? '' : selectedKeys[0];
    let new_site_gp_status = '';

    if (selectedKeys[0] === company_info?.brand_code) {
      new_site_gp_status = 1;
    } else {
      const { is_gp_area = 1 } = list.find(({ site_id }) => site_id == selectedKeys[0]) || {};
      new_site_gp_status = is_gp_area;
    }

    dispatch({
      type: 'operator/transferOperator',
      payload: {
        company_site_id,
        courier_phone,
        old_site_gp_status,
        new_site_gp_status,
      },
    }).then(() => {
      getOperatorList();
      toggleOpen(false);
    });
  };

  const onCancel = () => {
    toggleOpen(false);
  };

  const onSelect = useCallback(selectedSite => {
    setSelectedKeys(selectedSite);
  }, []);

  return (
    <div>
      {children}
      <Modal
        destroyOnClose
        title="移动业务员"
        visible={visible}
        onCancel={onCancel}
        okText="确认"
        cancelText="取消"
        centered
        onOk={onOk}
      >
        <DirectoryTree
          selectedKeys={selectedKeys}
          defaultExpandAll
          onSelect={onSelect}
          expandAction="doubleClick"
        >
          {trees.map(parent => (
            <TreeNode
              title={parent.name || parent.site_name}
              key={parent.brand_code || parent.site_id}
              isLeaf={!company_info}
            >
              {parent.list &&
                parent.list.map(child => (
                  <TreeNode title={child.site_name} key={child.site_id} isLeaf />
                ))}
            </TreeNode>
          ))}
        </DirectoryTree>
      </Modal>
    </div>
  );
});

TransformOperator.defaultProps = {
  visible: false,
  toggleOpen: () => {},
  getOperatorList: () => {},
  selectedOperator: [],
};

TransformOperator.propTypes = {
  visible: PropTypes.bool,
  toggleOpen: PropTypes.func,
  getOperatorList: PropTypes.func,
  selectedOperator: PropTypes.array,
};

export default connect(({ loading, station }) => ({
  station,
  getting: loading.effects['station/getStationList'],
}))(TransformOperator);
